<template>
  <dys-modal
    :open="open"
    :title="t('习题管理')"
    @cancel="emit('cancel')"
    @ok="handleSubmit"
    :width="1200"
  >
    <a-form :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
      <a-row>
        <a-col :span="6">
          <a-form-item :label="t('学科')" v-bind="validateInfos.subject">
            <select-subject v-model:value="modelRef.subject"></select-subject>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item :label="t('难度')" v-bind="validateInfos.diffcult">
            <select-value-set
              v-model:value="modelRef.diffcult"
              :placeholder="t('请输入难度')"
              value-set-code="EXERCISES_DIFFICULTY"
              allow-clear
            ></select-value-set>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item :label="t('类型')" v-bind="validateInfos.exercisesType">
            <select-value-set
              v-model:value="modelRef.exercisesType"
              :placeholder="t('请输入类型')"
              value-set-code="EXERCISES_TYPE"
              allow-clear
              @change="
                modelRef.answer = null;
                modelRef.options = [];
              "
            ></select-value-set>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item :label="t('标签')" v-bind="validateInfos.tagIds">
            <select-tag
              v-model:value="modelRef.tagIds"
              :subject="modelRef.subject"
            ></select-tag>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item
            :label="t('题目')"
            v-bind="validateInfos.content"
            :label-col="{ span: 2 }"
            :wrapper-col="{ span: 22 }"
          >
            <quill-editor
              v-model:value="modelRef.content"
              placeholder="请输入题目内容"
            ></quill-editor>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item
            :label="t('答案')"
            v-bind="validateInfos.answer"
            :label-col="{ span: 2 }"
            :wrapper-col="{ span: 22 }"
          >
            <quill-editor
              v-if="modelRef.exercisesType == 'SHORT_ANSWER'"
              v-model:value="modelRef.answer"
              placeholder="请输入答案"
            ></quill-editor>
            <radio-picker
              v-else-if="modelRef.exercisesType == 'RADIO_PICK'"
              v-model:value="modelRef.answer"
              v-model:options="modelRef.options"
            ></radio-picker>
            <checkbox-picker
              v-else-if="modelRef.exercisesType == 'MULTIPLE_PICK'"
              v-model:value="modelRef.answer"
              v-model:options="modelRef.options"
            ></checkbox-picker>
            <judge-picker
              v-else-if="modelRef.exercisesType == 'JUDGE'"
              v-model:value="modelRef.answer"
              v-model:options="modelRef.options"
            ></judge-picker>
            <a-input
              v-else-if="modelRef.exercisesType == 'FILL'"
              v-model:value="modelRef.answer"
              placeholder="请输入答案"
              allow-clear
            ></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item
            :label="t('解析')"
            v-bind="validateInfos.analysis"
            :label-col="{ span: 2 }"
            :wrapper-col="{ span: 22 }"
          >
            <quill-editor
              v-model:value="modelRef.analysis"
              placeholder="请输入答案解析"
            ></quill-editor>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </dys-modal>
</template>
<script lang="ts" setup>
import { pick } from "lodash";
import { useI18n } from "vue-i18n";
import { reactive, watch } from "vue";
import { Form, message } from "ant-design-vue";
import { add, update } from "@/api/answer/base-data/exercises";
import type { FormRule } from "@/typing";
import type {
  ExercisesParams,
  QueryResult,
} from "@/api/answer/base-data/exercises/typing";
import SelectTag from "../widgets/select-tag.vue";
import RadioPicker from "./radio-picker.vue";
import JudgePicker from "./judge-picker.vue";
import CheckboxPicker from "./checkbox-picker.vue";
import QuillEditor from "@/components/quill-editor/index.vue";
import SelectSubject from "@/components/select-subject/index.vue";
import SelectValueSet from "@/components/select-value-set/index.vue";
interface Props {
  /**弹窗 */
  open: boolean;
  /**行数据 */
  model: QueryResult;
}
const props = defineProps<Props>();
const emit = defineEmits(["cancel", "ok"]);
const { t } = useI18n();
const initValue = (): ExercisesParams => ({
  exercisesId: null,
  content: null,
  exercisesType: null,
  tagIds: null,
  answer: null,
  diffcult: null,
  subject: null,
  analysis: null,
  options: [],
});
const modelRef = reactive(initValue());
const modelRule = reactive<FormRule<ExercisesParams>>({
  content: [{ required: true, message: () => t("请输入题目吗") }],
  diffcult: [{ required: true, message: () => t("请选择难度") }],
  subject: [{ required: true, message: () => t("请选择学科") }],
  exercisesType: [{ required: true, message: () => t("请选择习题类型") }],
  answer: [{ required: true, message: () => t("请输入答案") }],
  analysis: [{ required: true, message: () => t("请输入解析") }],
});
const { validate, validateInfos, resetFields } = Form.useForm(
  modelRef,
  modelRule
);
watch([() => props.model, () => props.open], ([model]) => {
  resetFields(pick(model || initValue(), Object.keys(modelRef)));
});
/**提交 */
const handleSubmit = async () => {
  try {
    await validate();
  } catch {
    return message.warning(t("校验失败"));
  }
  const { success } = await (props.model?.exercisesId ? update : add)(modelRef);
  if (success) {
    message.success(props.model?.exercisesId ? t("修改成功") : t("新增成功"));
    emit("ok");
    emit("cancel");
  }
};
</script>
